<template>
    <div class="registar-page">
        <van-nav-bar title="面经注册" />
        <!-- 给表单绑定提交事件  通过v-model获取表达数据-->
        <!-- 校验  rules=[{校验的类型，错误的提示}]-->
        <van-form @submit="onSubmit">
            <van-field v-model="username" name="username" label="用户名" placeholder="用户名" 
             :rules="[
                {required:true,message:'请输入用户名'},
                {pattern:/^\w{6,15}$/,message:'用户名6-15位'}
             ]"           ></van-field>           
            <van-field v-model="password" name="password" label="密码" placeholder="密码"
            :rules="[
                {required:true,message:'请输入密码'},
                {pattern:/^\w{6,15}$/,message:'密码6-15位'}
             ]"></van-field>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">注册</van-button>
            </div>
        </van-form>
        <a class="link" href="#/logon">有账号，去登录</a>
       
    </div>
</template>
<script>
//导入封装的接口
import {UserRegister} from '@/api/user'
export default {
    name: 'registar-page',
    data() {
        return {
            username:'',
            password:''
        }
    },
    methods: {
      async  onSubmit(value){
                //发送请求s
           const data  = await UserRegister(value)
           this.$toast.success('注册成功')//注册成功提示
           this.$router.push('/')
        }
    }
}
</script>
<style>
.link {
    color: blue;
    font-size: 15px;
    float: right;
}
</style>
